<template>
  <div class="PDetail" ref="PDetail">
    <div class="bk">
      <el-empty description="暂无内容" v-if="detailListLength == 0"></el-empty>
      <div class="block">
        <SmallBlock v-for="index in detailListLength" :key="index" 
        :config="detailList[index - 1]"
        ></SmallBlock>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        :hide-on-single-page="true"
        background
        layout="prev, pager, next"
        :page-count="totalPage"
        @current-change="changePage"
        @prev-click="beforePage"
        @next-click="nextPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "PDetail",
  data() {
    return {
      totalPage: 10,
      detailListLength:0,
      detailList:[],
      nowPage:1,
      flag:false
    };
  },
  created(){
    this.sendReq();
  },
  methods:{
    changePage(nowPage){
      this.nowPage = nowPage
      this.sendReq()
    },
    beforePage(nowPage){
      this.nowPage = nowPage
      this.sendReq()
    },
    nextPage(nowPage){
      this.nowPage = nowPage
      this.sendReq()
    },
  },
  computed: {
    sendReq() {
      return ()=>{
        this.$store.dispatch('personalCenter/reqDetailWrite', this.nowPage).then((result)=>{
          if(result.data.status == '200'){
            this.detailList = result.data.data
            this.totalPage = result.data.totalPage
            this.detailListLength = result.data.data.length
            if(this.flag) this.scrool();
            this.flag = true
          }
        })
      }
    },
    scrool(){
      return () =>{
        window.scrollTo(0,this.$refs.PDetail.offsetTop);
      }
    }
  },
};
</script>

<style lang="less">
.PDetail {
  height: auto;
  display: flex;
  align-items: center;
  flex-direction: column;

  .bk {
    width: 80%;
    min-height: 1020px;

    .block {
      width: 100%;
    }
  }
  .pagination {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;

    .el-pagination {
      height: 40px;

      ul {
        height: 40px;

        li {
          height: 40px;
          width: 40px;
          font-size: 20px;
          line-height: 40px;
        }

        .active {
          background-color: black !important;
        }
      }

      button {
        height: 40px;
        width: 40px;
        font-size: 20px;
        line-height: 40px;
      }
    }
  }
}
</style>